﻿@page "/card/reveal-card"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SampleDescription>
    <p>This sample demonstrates rendering the card with reveal layouts. Hidden information of card can be revealed to see while clicking “Know more”.</p>
</SampleDescription>
<ActionDescription>
    <p>Cards in this sample have a hidden content within the DOM which is available behind the visible element.</p>
</ActionDescription>

<div class="control-section card-control-section tile_layout">
    <div class='row e-card-layout' style="margin: auto">
        <div>
            <SfCard>
                <CardImage Image="https://ej2.syncfusion.com/demos/src/card/images/Tile_4.png" />
                <CardContent>
                    @if (ShowTable)
                    {
                        <table style="line-height: 2.75em; width: 100%">
                            <tr>
                                <td>
                                    <div class="card-text-value"><b>Author</b></div>
                                </td>
                                <td>
                                    <div class="card-text-value">Steve Fenton</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="card-text-value"><b>Published On</b></div>
                                </td>
                                <td>
                                    <div class="card-text-value">Jul 7, 2014</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="card-text-value"><b>Pages</b></div>
                                </td>
                                <td>
                                    <div class="card-text-value">82</div>
                                </td>
                            </tr>
                        </table>
                    }
                    else
                    {
                        <table style="line-height: 1.4em;">
                            <tr>
                                <td style="text-align:left">
                                    <CardHeader Title="Typescript"></CardHeader>
                                </td>
                                <td>
                                    <div @onclick="@(()=> ShowTable = !ShowTable)">
                                        <span class="e-icons e-collapse"></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="1">
                                    Microsoft has done extensive work to make JavaScript easier to use. Microsoft TypeScript extends many features of .NET to JavaScript.
                                </td>
                            </tr>
                        </table>
                    }
                </CardContent>
                @if (ShowTable)
                {
                    <CardFooter>
                        <CardFooterContent>
                            <SfButton CssClass="e-btn e-outline e-primary" @onclick="@(()=> ShowTable = !ShowTable)">Know More</SfButton>
                        </CardFooterContent>
                    </CardFooter>
                }
            </SfCard>
        </div>
    </div>
</div>

@code{
    private bool ShowTable = true;
}

<style>
    .e-card-image {
        height: 180px;
        width: 240px;
    }

    .card-text-value {
        text-align: left;
        font-weight: 500;
    }

    .tile_layout.card-control-section .row.filter .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
        display: inline-flex;
        flex-direction: column;
        width: 100%;
    }

    .tile_layout.card-control-section .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
        width: 100%;
        padding: 10px;
    }

    .card-control-section.tile_layout .e-card-layout {
        margin: auto;
        max-width: 250px;
    }

    .e-card-header {
        padding-left: inherit !important;
    }

    .e-btn {
        margin-left: 10px;
    }

    .e-card .e-card-header .e-card-header-caption .e-card-header-title {
        font-weight: bold;
    }

    .e-collapse::before {
        content: "\e745";
    }
    
    .tailwind .e-collapse::before {
        content: "\e771";
    }
</style>